import React  from 'react';
import style from './feedTool.less';
import {Button,Icon} from 'antd';

export default class FeedTool extends React.Component{
  state = {
    upvotedNum: parseInt(this.props.note.upvotedCount),
    isUpvoted: this.props.note.isUpvoted,
    isDownvoted: this.props.note.isDownvoted,
    isCollect: this.props.note.isSaved,
  };

  changeUpvoted = ()=>{
    if(this.state.isUpvoted) {
      this.setState({
        ...this.state,
        isUpvoted: false,
        upvotedNum: this.state.upvotedNum - 1,
      });
    } else {
      this.setState({
        ...this.state,
        isUpvoted: true,
        upvotedNum: this.state.upvotedNum + 1,
        isDownvoted: false,
      });
    }
    
    this.props.putEducationFeed({
      action: this.state.isUpvoted ? 'delete' : 'put',
      name: 'upvoted',
      educationId: this.props.note.id,
      traderId: this.props.trader,
    });
  }

  changeDownvoted = ()=>{
    if(this.state.isDownvoted) {
      this.setState({
        ...this.state,
        isDownvoted: false,
      });
    } else {
      this.setState({
        ...this.state,
        isUpvoted: false,
        upvotedNum: this.state.isUpvoted ? this.state.upvotedNum - 1 : this.state.upvotedNum,
        isDownvoted: true,
      });
    }
    
    this.props.putEducationFeed({
      action: this.state.isDownvoted ? 'delete' : 'put',
      name: 'downvoted',
      educationId: this.props.note.id,
      traderId: this.props.trader,
    });
  }

  changeCollect = ()=>{
    this.setState({
      ...this.state,
      isCollect: !this.state.isCollect,
    });
    this.props.putEducationFeed({
      action: this.state.isCollect ? 'delete' : 'put',
      name: 'saved',
      educationId: this.props.note.id,
      traderId: this.props.trader,
    });
  }

  render() {
    return (
      <div className={style.tool}>
        <Button onClick={this.changeUpvoted} type={this.state.isUpvoted?'primary':''}><Icon type="caret-up" /> {this.state.upvotedNum}</Button>
        <Button onClick={this.changeDownvoted} type={this.state.isDownvoted?'primary':''}><Icon type="caret-down" /></Button>
        <Button onClick={this.changeCollect} type={this.state.isCollect?'primary':''}><Icon type="star" /> 收藏</Button>
      </div>
    )
  }
}
